<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    

<div id="app" style="display: flex; flex-direction: row;">
    <div style="width: 20%;">
        <div style="height: 300px;">
            <el-avatar :size="60">
                <img src="/public/assets/img.jpg"/>
            </el-avatar>
            <div class="sub-title">Administrator name</div>
        </div>
        <div style="height: 500px;">
            <template>
                <el-tabs :tab-position="tabPosition" style="height: 500px;" @tab-click="handleTabClick">
                    <el-tab-pane label="storeApplicationApproval" name="storeApproval"></el-tab-pane>
                    <el-tab-pane label="refundApproval" name="refundApproval"></el-tab-pane>
                    <el-tab-pane label="complaintHandling" name="complaintsHandling"></el-tab-pane>
                </el-tabs>
            </template>
        </div>
        
    </div>
    
    <div style="width: 80%;">
        <template>
            <el-table v-if="currentTab === 'storeApproval'"
                    :data="tableStoreData"
                    >
                <el-table-column
                        prop="storeName"
                        label="storeName"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="scope"
                        label="storeScope"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="detail"
                        label="storeDetails">
                </el-table-column>
                <el-table-column
                        label="storeLogo">
                    <template slot-scope="scope">
                        <img :src="scope.row.logoPath" alt="store logo"
                             style="width: 80px; height: 80px;">
                    </template>
                </el-table-column>
                <el-table-column
                        label="approvalOpinion">
                    <template slot-scope="scope">
                        <el-button type="primary" v-on:click="handleApprove(true, scope.row.id)">passed</el-button>
                        <el-button v-on:click="handleApprove(false, scope.row.id)">not passed</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div v-if="currentTab === 'refundApproval' || currentTab === 'complaintsHandling'">
            <h3>Feature is under development...</h3>
        </div>
    </div>
    
</div>

<!-- 引入组件库 -->
<script src="/component/vue.js"></script>
<script src="/component/axios-0.18.0.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入js文件 -->
<script type="module" src="/public/javascript/admin.js"></script>
<script>

</script>
</body>
</html>
